<template>
    <div class="app-footer">
        <cube-tab-bar
            v-model="selectedLabelDefault"
            :value="selectedLabelDefault"
            :data="tabs"
            @click="clickHandler"
            @change="changeHandler"
        ></cube-tab-bar>
    </div>
</template>

<script>
export default {
    name: 'v-footer',
    data () {
        return {
            selectedLabelDefault: 'home',
            tabs: [
                {
                    label: '首页',
                    value: 'home',
                    icon: 'iconfont icon-shouye'
                },
                {
                    label: '聊天',
                    value: 'chat',
                    icon: 'iconfont icon-shouye'
                },
                {
                    label: '购物车',
                    value: 'shopping',
                    icon: 'iconfont icon-shouye'
                },
                {
                    label: '个人',
                    value: 'my',
                    icon: 'iconfont icon-shouye'
                }
            ]
        }
    },
    methods: {
        clickHandler (val) {
            this.$router.push({ path: `/${val}` })
        },
        changeHandler (label) {
            // if you clicked different tab, this methods can be emitted
        }
    },
    watch: {
        '$route' (to, from) {
            this.selectedLabelDefault = to.name
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.app-footer {
    max-width: 750px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    font-size: 12px;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px #ccc;
    background: #fff;

    >>>.cube-tab {
        >div {
            margin-top: 5px;
        }
    }
}
</style>
